<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校友名录</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="../asset/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../asset/css/nav.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">校友交流系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="../index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="xiaoyou_minglu.html">校友名录</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="xiaoyyou_xiangqin.html">校友相亲</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="xiaoyou_juanzeng.html">捐赠信息</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="xiaoyou_luntan.html">校友论坛</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="call_us.html">联系我们</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 主体内容 -->
<div class="container mt-4">
  <h1>校友名录</h1>
  <p>以下是我们的校友名录，你可以搜索或浏览找到你认识的校友。</p>

  <!-- 搜索模块 -->
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="搜索校友姓名或专业" aria-label="搜索校友姓名或专业" aria-describedby="button-addon1">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">搜索</button>
  </div>

  <!-- 表格 -->
  <table class="table table-striped table-hover">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">毕业年份</th>
      <th scope="col">专业</th>
      <th scope="col">联系方式</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>宇智波佐助</td>
      <td>2010</td>
      <td>计算机科学与技术</td>
      <td>123456@gmail.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>春野樱</td>
      <td>2012</td>
      <td>电子信息工程</td>
      <td>amnsamns@163.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>日向宁次</td>
      <td>2010</td>
      <td>体育舞蹈</td>
      <td>YGO666@163.com</td>
    </tr><tr>
      <th scope="row">2</th>
      <td>下江小春</td>
      <td>2016</td>
      <td>水产养殖</td>
      <td>114514@qq .com</td>
    </tr>
    <!-- 更多校友信息 -->
    </tbody>
  </table>

  <!--  echars图表  -->
  <div class="row">
    <div class="col-6">
      <div class="row text-center d-flex align-items-center">
        <div id="zzj-1" style="width: 600px; height: 600px;"></div>
      </div>

      <div class="text-center d-flex align-items-center row ">
        <h3>校友毕业去向分析</h3>
      </div>
    </div>
    <div class="col-6">
      <div id="zzj-2" style="width: 600px; height: 600px;"></div>
      <div class="text-center d-flex align-items-center row ">
        <h3>校友往年薪资水平和未来预期</h3>
      </div>
    </div>
  </div>
</div>



<!-- 页脚 -->
<footer class="footer mt-auto py-3 bg-light">
  <div class="container">
    <span class="text-muted">&copy; 2024 校友交流系统</span>
  </div>

</footer>

<!-- 引入Bootstrap JS -->
<script src="../asset/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
<script src="../asset/js/echarts.js"></script>
<script src="../asset/js/echarts-gl-2.0.8/echarts-gl-2.0.8/dist/echarts-gl.js"></script>
<script src="../asset/js/echarts-gl-2.0.8/echarts-gl-2.0.8/dist/echarts-gl.min.js"></script>
<script type="text/javascript">
  var chartDom = document.getElementById('zzj-1');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: '长沙' },
          { value: 38, name: '株洲' },
          { value: 32, name: '湘潭' },
          { value: 30, name: '衡阳' },
          { value: 28, name: '武汉' },
          { value: 26, name: '深圳' },
          { value: 22, name: '重庆' },
          { value: 18, name: '海南' }
        ]
      }
    ]
  };

  option && myChart.setOption(option);

</script>
<script type="text/javascript">
  var chartDom = document.getElementById('zzj-2');
  var myChart = echarts.init(chartDom);
  var option;

  // prettier-ignore
  var hours = ['2009', '2010', '2011', '2012', '2013', '2014', '2015',
    '2016', '2017', '2018', '2019', '2020',
    '2021', '2022', '2023', '2024', '2025', '2026',
    '2027', '2028', '2029', '2030', '2031', '2032'];
  // prettier-ignore
  var days = ['信科院', '农学院', '食科院',
    '马克思学院', '商学院', '体育学院', '继续教育学院'];
  // prettier-ignore
  var data = [
    [0, 0, 10000], [0, 1, 12000], [0, 2, 13000], [0, 3, 15000], [0, 4, 14000], [0, 5, 16500], [0, 6, 18000], [0, 7, 17500], [0, 8, 19000], [0, 9, 20500], [0, 10, 21000], [0, 11, 22000], [0, 12, 23000], [0, 13, 24000], [0, 14, 25000], [0, 15, 26000], [0, 16, 27000], [0, 17, 28000], [0, 18, 29000], [0, 19, 30000], [0, 20, 29000], [0, 21, 31000], [0, 22, 32000], [0, 23, 33000],
    [1, 0, 11000], [1, 1, 13000], [1, 2, 15500], [1, 3, 17000], [1, 4, 19000], [1, 5, 21000], [1, 6, 22000], [1, 7, 23000], [1, 8, 24000], [1, 9, 25000], [1, 10, 26000], [1, 11, 27000], [1, 12, 28000], [1, 13, 29000], [1, 14, 30000], [1, 15, 31000], [1, 16, 29000], [1, 17, 32000], [1, 18, 33000], [1, 19, 34000], [1, 20, 32000], [1, 21, 35000], [1, 22, 36000], [1, 23, 37000],
    [2, 0, 12000], [2, 1, 14000], [2, 2, 16000], [2, 3, 18000], [2, 4, 20000], [2, 5, 22000], [2, 6, 21000], [2, 7, 23000], [2, 8, 25000], [2, 9, 26000], [2, 10, 27000], [2, 11, 29000], [2, 12, 30000], [2, 13, 32000], [2, 14, 33000], [2, 15, 34000], [2, 16, 35000], [2, 17, 36000], [2, 18, 37000], [2, 19, 38000], [2, 20, 39000], [2, 21, 37000], [2, 22, 40000], [2, 23, 41000],
    [3, 0, 13000], [3, 1, 15000], [3, 2, 17000], [3, 3, 19000], [3, 4, 21000], [3, 5, 23000], [3, 6, 25000], [3, 7, 27000], [3, 8, 29000], [3, 9, 31000], [3, 10, 33000], [3, 11, 35000], [3, 12, 37000], [3, 13, 39000], [3, 14, 41000], [3, 15, 43000], [3, 16, 45000], [3, 17, 47000], [3, 18, 49000], [3, 19, 48000], [3, 20, 50000], [3, 21, 49000], [3, 22, 52000], [3, 23, 54000],
    [4, 0, 14000], [4, 1, 16000], [4, 2, 18000], [4, 3, 20000], [4, 4, 22000], [4, 5, 24000], [4, 6, 26000], [4, 7, 28000], [4, 8, 30000], [4, 9, 32000], [4, 10, 34000], [4, 11, 36000], [4, 12, 38000], [4, 13, 40000], [4, 14, 42000], [4, 15, 44000], [4, 16, 46000], [4, 17, 48000], [4, 18, 50000], [4, 19, 49000], [4, 20, 51000], [4, 21, 53000], [4, 22, 55000], [4, 23, 57000],
    [5, 0, 15000], [5, 1, 17000], [5, 2, 19000], [5, 3, 21000], [5, 4, 23000], [5, 5, 25000], [5, 6, 27000], [5, 7, 29000], [5, 8, 31000], [5, 9, 33000], [5, 10, 35000], [5, 11, 37000], [5, 12, 39000], [5, 13, 41000], [5, 14, 43000], [5, 15, 45000], [5, 16, 47000], [5, 17, 49000], [5, 18, 51000], [5, 19, 53000], [5, 20, 55000], [5, 21, 57000], [5, 22, 59000], [5, 23, 61000],
    [6, 0, 16000], [6, 1, 18000], [6, 2, 20000], [6, 3, 22000], [6, 4, 24000], [6, 5, 26000], [6, 6, 28000], [6, 7, 30000], [6, 8, 32000], [6, 9, 34000], [6, 10, 36000], [6, 11, 38000], [6, 12, 40000], [6, 13, 42000], [6, 14, 44000], [6, 15, 46000], [6, 16, 48000], [6, 17, 50000], [6, 18, 52000], [6, 19, 54000], [6, 20, 56000], [6, 21, 58000], [6, 22, 60000], [6, 23, 62000]
  ];


  option = {
    tooltip: {},
    visualMap: {
      type: 'continuous',
      max: 62000,
      inRange: {
        color: [
          '#313695',
          '#4575b4',
          '#74add1',
          '#abd9e9',
          '#e0f3f8',
          '#ffffbf',
          '#fee090',
          '#fdae61',
          '#f46d43'
        ]
      },
      calculable: true
    },
    xAxis3D: {
      type: 'category',
      data: hours
    },
    yAxis3D: {
      type: 'category',
      data: days
    },
    zAxis3D: {
      type: 'value'
    },
    grid3D: {
      boxWidth: 200,
      boxDepth: 80,
      viewControl: {
        // projection: 'orthographic'
      },
      light: {
        main: {
          intensity: 1.2,
          shadow: true
        },
        ambient: {
          intensity: 0.3
        }
      }
    },
    series: [
      {
        type: 'bar3D',
        data: data.map(function (item) {
          return {
            value: [item[1], item[0], item[2]]
          };
        }),
        shading: 'lambert',
        label: {
          fontSize: 16,
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20,
            color: '#900'
          },
          itemStyle: {
            color: '#900'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);

</script>
</body>
</html>